<script>
import axios from 'axios'

export default {
  data(){
    return {
      userinfos:[]
    }
  },
  methods:{
    sendGet(){
      axios.get('http://localhost:8086/api/user/find')
          .then((res)=>{
            console.log(res.data.data)
            this.userinfos = res.data.data
          })
          .catch(function (err) {
            console.log(err)
          })
    },
    sendPost(){
      axios.post('http://localhost:8086/api/user/insert',{'uname':'tianqi','upwd':'000000','usex':'女', 'ubirth':'1998-10-19'})
          .then(function (res) {
            console.log(res)
          })
          .catch(function (err) {
            console.log(err)
          })
    },
    sendPut(){
      axios.put('http://localhost:8086/api/user/update',{'uid':2,'uname':'zhaoliu','upwd':'222222','sex':'女', 'ubirth':'2000-01-01'})
          .then(function (res) {
            console.log(res)
          })
          .catch(function (err) {
            console.log(err)
          })
    },
    sendDelete(){
      axios.delete('http://localhost:8086/api/user/delete/4')
          .then(function (res) {
            console.log(res)
          })
          .catch(function (err) {
            console.log(err)
          })
    }
  }
}

</script>

<template>
  <button @click="sendGet">发送Get请求</button>
  <button @click="sendPost">发送Post请求</button>
  <button @click="sendPut">发送Put请求</button>
  <button @click="sendDelete">发送Delete请求</button>
  <table>
    <tr>
      <th>ID</th>
      <th>UserName</th>
      <th>Password</th>
      <th>Sex</th>
      <th>Birth</th>
    </tr>
    <tr v-for="(userinfo,index) in userinfos" :key="userinfo.id">
      <td>{{userinfo.uid}}</td>
      <td>{{userinfo.uname}}</td>
      <td>{{userinfo.upwd}}</td>
      <td>{{userinfo.usex}}</td>
      <td>{{userinfo.ubirth}}</td>
    </tr>
  </table>
</template>

<style>
</style>